<template>
	<view style="padding-bottom: 40rpx;">
		<!-- 搜索头部 -->
		<view class="mainpadding dingwei">
			<view class="bjsdw"></view>
			<view class="" style="position: relative; z-index: 2;">
				<view class="ffffff flexbetween ssbox">
					<view class="flexleft">
						<u-icon name="search" color="#999" size="20"></u-icon>
						<input type="text" placeholder="请输入搜索内容" class="hei_text main_size bold" v-model="keyword" confirm-type="search" @confirm="chaxun()">
					</view>
					<view class="rightss" @click="chaxun">搜索</view>
				</view>
				<view class="margin_top">
					<u-swiper :list="list1" keyName="image_text" indicator circular @click="lbtclick($event,list1)"></u-swiper>
				</view>
			</view>
		</view>
		<!-- 选择酒店 -->
		<view class="mainpadding2">
			<view class="ffffff radius mainpadding">
				<view class="flexbetween">
					<view class="flexleft" @click="jumpurl('/pages_shouye/xuanzecs')">
						<view class="margin_right1">
							<u-icon name="map-fill" color="#FF9341" size="20"></u-icon>
						</view>
						<view class="sanshier fonweight zhonghei">{{citytext}}</view>
					</view>
					<view class="flexright" @click="getlocation">
						<view class="strongtext xiaocheng margin_right1">当前位置</view>
						<image class="dqicon" src="../static/images/system/dqwz.png" mode=""></image>
					</view>
				</view>
				<view class="flexbetween margin_top4" @click="show = true">
					<view class="">
						<view class="strongtext xiaohui">入住日期</view>
						<view class="sanshier xiaohei fonweight">{{startime}}
							<text class="strongtext xiaohei">{{startweek}}</text>
						</view>
					</view>
					<view class="hhbtn flexcenter">{{daynum}}晚</view>
					<view class="">
						<view class="strongtext xiaohui">离住日期</view>
						<view class="sanshier xiaohei fonweight">{{endtime}}
							<text class="strongtext xiaohei">{{endweek}}</text>
						</view>
					</view>
				</view>
				<view class="bigbtn margin_top6" @click="chaxun">查询酒店</view>
			</view>
		</view>
		<!-- 推荐酒店 -->
		<view class="">
			<view class="flexleft">
				<view class="line margin_right"></view>
				<view class="sanshier zhonghei bold">推荐酒店民宿</view>
			</view>
			<view class="mainpadding ffffff radius margin_top">
				<view class="flexbetween">
					<view class="flexleft">
						<view class="ershib margin_right0" @click="areashow=true" :class="area_text?'xiaohuang':'xiaohui'">{{area_text?area_text:"位置区域"}}</view>
						<u-icon name="arrow-down-fill" color="#ff9341" size="8" v-if="area_text"></u-icon>
						<u-icon name="arrow-down-fill" color="#999" size="8" v-else></u-icon>
					</view>
					<view class="flexleft">
						<view class="ershib margin_right0" :class="star_type?'xiaohuang':'xiaohui'" @click="sx(1)">评分排序</view>
						<view class="flexcolumn">
							<view class="">
								<u-icon name="arrow-up-fill" color="#ff9341" size="8" v-if="star_type==2"></u-icon>
								<u-icon name="arrow-up-fill" color="#999" size="8" v-if="star_type!=2"></u-icon>
							</view>
							<view class="" style="margin-top: 5rpx;">
								<u-icon name="arrow-down-fill" color="#ff9341" size="8" v-if="star_type==1"></u-icon>
								<u-icon name="arrow-down-fill" color="#999" size="8" v-if="star_type!=1"></u-icon>
							</view>
						</view>
					</view>
					<view class="flexleft">
						<view class="ershib margin_right0" :class="price_type?'xiaohuang':'xiaohui'" @click="sx(2)">价格排序</view>
						<view class="flexcolumn">
							<view class="">
								<u-icon name="arrow-up-fill" color="#ff9341" size="8" v-if="price_type==2"></u-icon>
								<u-icon name="arrow-up-fill" color="#999" size="8" v-if="price_type!=2"></u-icon>
							</view>
							<view class="" style="margin-top: 5rpx;">
								<u-icon name="arrow-down-fill" color="#ff9341" size="8" v-if="price_type==1"></u-icon>
								<u-icon name="arrow-down-fill" color="#999" size="8" v-if="price_type!=1"></u-icon>
							</view>
							
						</view>
					</view>
					<!-- <view class="flexleft">
						<view class="strongtext xiaohui margin_right0">筛选</view>
						<u-icon name="arrow-down-fill" color="#ff9341" size="8"></u-icon>
						<u-icon name="arrow-down-fill" color="#999" size="8"></u-icon>
					</view> -->
				</view>
			</view>
			<view class="ffffff radius mainpadding margin_top" v-for="item in list.data" :key="item.id" @click="tzjdxq(item.id,item.distance)">
				<view class="flexleft">
					<view class="flexcenter sanshis" v-for="(ite,inde) in item.images_text" :key="inde" v-if="inde==0 || inde==1 || inde==2">
						<image class="tupian" :src="ite" mode=""></image>
					</view>
				</view>
				<view class="zhonghei fonweight sanshier margin_top">{{item.name}}</view>
				
				<view class="flexleft margin_top2">
					<u-icon name="man-add" color="#ff9341" size="16"></u-icon>
					<view class="xiaohuang margin_right margin_left1 strongtext">粉丝{{item.fans_num}}个</view>
					<u-icon name="eye" color="#999" size="16"></u-icon>
					<view class="xiaohui margin_right margin_left1 strongtext">浏览{{item.views}}次</view>
				</view>
				<view class="flexbetween margin_top2">
					<view class="flexleft">
						<u-icon name="map" color="#ff9341" size="16"></u-icon>
						<view class="xiaohui margin_left1 main_size yhxk" style="width: 500rpx;">{{item.detail}}</view>
					</view>
					<view class="xiaohuang main_size">{{returnKmUnit(Number(item.distance))}}</view>
				</view>
			</view>
		</view>
		<u-picker :show="areashow" :columns="arealist" keyName="name" @confirm="areaconfirm" @cancel="areashow=false"></u-picker>
		<u-calendar color="#ff9341" startText="入住" endText="离店" mode="range" confirmText="确认选择"
			confirmDisabledText="确认选择" :show="show" @confirm="confirm" @close="show = false"></u-calendar>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				list1: [],
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				keyword:"",
				price_type:0,
				star_type:0,
				lat:"",
				lng:"",
				cityid:"",
				citytext:"",
				start:"",//年月日
				end:"",//年月日
				startime: "", //开始时间
				endtime: "", //结束时间
				startweek: "", //开始周
				endweek: "", //结束周
				daynum:1,
				show:false,
				arealist:[],
				areashow:false,
				area_id:"",
				area_text:"",
			}
		},
		onLoad() {
			uni.$on("selectaddressjd",data=>{
				console.log("选择城市了啦啦啦啦啦>>>>>>>>>>",data);
				this.cityid = data.cityid
				this.citytext = data.citytext
				this.area_id = ""
				this.area_text = ""
				this.init()
			})
			this.dateinit()
			this.getbanner()
			let storagecity = uni.getStorageSync("storagecity") || null
			if(storagecity){
				this.citytext = storagecity.citytext
				this.lat = storagecity.latitude
				this.lng = storagecity.longitude
				this.cityid = storagecity.cityid
				this.init()
			}else{
				this.getlocation()
			}
		},
		onUnload() {
			uni.$off("selectaddressjd")
		},
		watch:{
			cityid(newval){
				this.area_id = ""
				this.area_text = ""
				this.getarea()
			}
		},
		methods: {
			jumpurl(url){
				uni.navigateTo({
					url
				})
			},
			getarea(){
				httpRequest.request('/api/index/getAreaIndex', 'POST', {
					city_id:this.cityid
				}).then(res => {
					this.arealist = []
					this.arealist.push(res.data)
				}).catch(err => {})
			},
			getbanner() { //获取轮播图
				httpRequest.request('/api/index/getAdvertiseList', 'POST', {
					advertise_position_id: 2,
					is_more: 1
				}).then(res => {
					this.list1 = res.data
				}).catch(err => {})
			},
			tzjdxq(id,juli) {
				let date = {
					id: id, //酒店id
					start: this.start, //年月日
					end: this.end, //年月日
					startime: this.startime, //开始时间
					endtime: this.endtime, //结束时间
					startweek: this.startweek, //开始周
					endweek: this.endweek, //结束周
					daynum: this.daynum,
					juli:juli
				}
				uni.navigateTo({
					url: '/pages_lianmengsc/jiudianxq?msg=' + encodeURIComponent(JSON.stringify(date))
				})
			},
			init(isPage, page) {
				let _this = this;
				httpRequest.request('/api/hotelcl/hotelIndex', 'GET', {
					page: page || 1,
					limit: _this.limit,
					lat: _this.lat,
					lng: _this.lng,
					price_type: this.price_type,
					star_type: this.star_type,
					city_id:this.cityid,
					area_id:this.area_id,
					keyword:_this.keyword
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			
			getlocation() {
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				let _this = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.getcityInfo()
					},
					fail(err) {
						uni.hideLoading()
						console.log(err, 23432);
					}
				});
			},
			getcityInfo() {
				httpRequest.request('/api/index/getCurrCity', 'POST', {
					lat: this.lat,
					lng: this.lng
				}, false, false, true).then(res => {
					uni.hideLoading()
					let data = {
						citytext:res.data.pinfo.name,
						latitude:this.lat,
						longitude:this.lng,
						cityid:res.data.pid,
					}
					this.citytext = res.data.pinfo.name
					// this.citydata.cityid = res.data.id
					this.cityid = res.data.pid
					let area = {
						areatext:res.data.name,
						areaid:res.data.id
					}
					uni.setStorageSync("storagecity", data)
					uni.setStorageSync("storagearea", area)
					this.area_id = "",
					this.area_text = ""
					this.getarea()
					this.init()
				})
			},
			areaconfirm(e) {
				this.areashow = false
				this.area_id = e.value[0].id
				this.area_text = e.value[0].name
				this.star_type = 0
				this.price_type = 0
				this.init()
			},
			sx(val){
				if(val==1){
					this.citydata = {
						provence: "",
						provenceid: "",
						city: "",
						cityid: ""
					}
					this.star_type = this.star_type==0?1:this.star_type==1?2:0
					this.price_type = 0
				}else{
					this.citydata = {
						provence: "",
						provenceid: "",
						city: "",
						cityid: ""
					}
					this.star_type = 0
					this.price_type = this.price_type==0?1:this.price_type==1?2:0
				}
				this.init()
			},
			chaxun() {
				let date = {
					start:this.start,//年月日
					end:this.end,//年月日
					startime: this.startime, //开始时间
					endtime: this.endtime, //结束时间
					startweek: this.startweek, //开始周
					endweek: this.endweek, //结束周
					daynum: this.daynum,
					keyword:this.keyword
				}
				uni.navigateTo({
					url: '/pages_lianmengsc/minsulb?msg=' + encodeURIComponent(JSON.stringify(date))
				})
			},
			// 时间选择确定
			confirm(e) {
				let start = e[0]
				let end = e[e.length - 1]
				this.startime = Number(start[5] + start[6]) + "月" + Number(start[8] + start[9]) + "日"//月日赋值
				this.endtime = Number(end[5] + end[6]) + "月" + Number(end[8] + end[9]) + "日"//月日赋值
				this.start = start
				this.end = end
				this.startweek = this.weekchange(start)//计算周
				this.endweek = this.weekchange(end)//计算周
				this.daynum = this.DateDiff(start, end)//计算间隔天数
				this.show = false
			},
			// 日期初始化
			dateinit() {
				// 今天
				let start = this.date(new Date())
				let end = new Date()
				// 明天
				end.setTime(end.getTime()+24*60*60*1000);
				end = this.date(end)
				this.start = start
				this.end = end
				this.startime = Number(start[5] + start[6]) + "月" + Number(start[8] + start[9]) + "日"//月日赋值
				this.endtime = Number(end[5] + end[6]) + "月" + Number(end[8] + end[9]) + "日"//月日赋值
				this.startweek = this.weekchange(start)//计算周
				this.endweek = this.weekchange(end)//计算周
				this.daynum = this.DateDiff(start, end)//计算间隔天数
			},
			date(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day
				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
			// 周转换，此处地date是年月日
			weekchange(date) {
				let weekArrayList = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', ]
				let index = new Date(date).getDay()
				let week = weekArrayList[index]
				return week
			},
			// 计算两个日期之间相差天数
			DateDiff(sDate1, sDate2) {
			 //sDate1和sDate2是2006-12-18格式
				var aDate1, aDate2, oDate1, oDate2, iDays;
				aDate1 = sDate1.split("-");
				oDate1 = new Date(aDate1[1] + '/' + aDate1[2] + '/' + aDate1[0]);
				aDate2 = sDate2.split("-");
				oDate2 = new Date(aDate2[1] + '/' + aDate2[2] + '/' + aDate2[0]);
				iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24);
				return iDays
			},
		}
	}
</script>

<style lang="scss" scoped>
	

	.tupian {
		width: 200rpx;
		height: 200rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
	}

	.hhbtn {
		width: 89rpx;
		height: 37rpx;
		border-radius: 37rpx 37rpx 37rpx 37rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #999999;
		border: 2rpx solid #999999;
	}

	.dqicon {
		width: 30rpx;
		height: 30rpx;
	}

	.bjsdw {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		width: 100%;
		height: 248rpx;
		background: linear-gradient(0deg, #f9e2d1 0%, #FF9341 100%);
	}
</style>